<template>
	<view class="page-container" @click.stop="closeDevicePopup">
		<!-- 顶部筛选区域 -->
		<view class="filter-section">
			<text class="filter-item" :class="index == currentDateIndex ? 'filter-item-active' : ''"
				v-for="(item, index) in dateList" :key="index" :data-index="index" @click="selectDate">{{item}}</text>
		</view>

		<view class="example-body" v-if="currentDateIndex == 3">
			<uni-datetime-picker v-model="range" type="daterange" :clearIcon="false" @change="sureDate" />
		</view>

		<!-- 状态筛选标签 -->
		<view class="type-tags">
			<text class="type-tag" :class="item.selected ? 'type-tag-active' : ''" v-for="(item, index) in categoryList"
				:key="index" :data-index="index" @click="selectCategory">{{item.name}}</text>
		</view>

		<!-- 设备选择标题 -->
		<view class="section-title" :style="showDeviceList ? 'border-color:#1677FF;' : 'border-color:#E5E7EB;'"
			@click.stop="selectDevice">
			<view class="" v-if="selectedDevices.length > 0" style="color: #1677FF;">已选择{{selectedDevices.length}}台设备
			</view>
			<view class="" v-else :style="showDeviceList ? 'color:#1677FF;'  : 'color:#9CA3AF'">选择设备</view>
			<uni-icons :type="showDeviceList ? 'up' : 'down'" size="14"
				:color="showDeviceList ? '#1677FF'  : '#9CA3AF'"></uni-icons>
		</view>

		<view class="popup-overlay" :style="popStyle" :class="{show: showDeviceList}" @click.self="closeDevicePopup">
			<view class="device-selector-popup">
				<view class="scroll-content">
					<template v-if="devlist.length > 0">
						<scroll-view class="scroll-my" scroll-y="true" :show-scrollbar="false" enhanced="true">
							<view class="search_item" v-for="(item,index) in devlist" :key="index" :data-index="index"
								@click.stop="poplist_selectDevice">
								<view class="search_left"
									:class="item.selected ? 'search_left_selected' : 'search_left_normal'">
									<image :src="item.selected ? '/static/warning/dev_select.png' : ''" mode="aspectFit"
										style="width: 36rpx;height: 24rpx;"></image>
									<view>{{item.devName}}</view>
								</view>
								<view style="color: #9CA3AF;">共{{item.alarmNum}}条</view>
							</view>
						</scroll-view>
						<view class="bottom-view_2">
							<view class="bottom_btn_2" @click.stop="reset">重置</view>
							<view class="bottom_btn" @click.stop="confirmSelect">确定</view>
						</view>
					</template>
					<template v-else>
						<view class="nodata">
							<view class="img"></view>
							<view class="text">暂无数据</view>
						</view>
					</template>
				</view>
			</view>
		</view>

			<view class="alarm-list">
				<z-paging ref="paging" :fixed="false" :show-loading-more-no-more-view="false" :safe-area-inset-bottom="true" :delay="500" :default-page-size="10" v-model="rows" @query="queryList">
					<template #empty>
						<view class="nodata">
							<view class="img"></view>
							<view class="text">暂无数据</view>
						</view>
					</template>
					<view class="alarm-item" v-for="(item, index) in rows" :key="index" :data-row="item"" @click.stop="
						seeDetail">
						<view class=" alarm-header">
							<view class="alarm-header_content">
								<image src="/static/warning/warning_icon.png" mode="aspectFit"
									style="width: 28rpx;height: 28rpx;">
								</image>
								<text class="alarm-level">严重告警</text>
							</view>
							<text class="alarm-time">{{item.alarmDate}}</text>
						</view>
					
						<text class="device-name">{{item.componentGoodsName}}</text>
						<text class="device-location">位置：{{item.location}}&nbsp;&nbsp;指标项：{{item.collectName}}</text>
					
						<view class="alarm-info_content">
							<view class="alarm-info">
								<text class="alarm-type">{{item.alarmTypeTranslate}}</text>
								<text class="alarm-value">当前值：{{item.alarmValue}}（正常范围：{{item.monitorRange}}）</text>
							</view>
							<view class="alarm-status" :class="item.disposeState == 1 ? 'done' : 'todo'">
								{{item.disposeState == 1 ? '已处理' : '待处理'}}
							</view>
						</view>
					
						<view class="action-buttons">
							<button class="action-btn confirm" v-if="item.disposeState == 1 ? false : true"
								@click.stop="confirmDo(item)">确认处理</button>
							<button class="action-btn detail">查看详情</button>
						</view>
					</view>
				</z-paging>
			</view>


	</view>
</template>

<script>
	import moment from "moment";
	export default {
		data() {
			return {
				dateList: [
					'今日', '本周', '本月', '自定义'
				],
				categoryList: [{
						name: '全部',
						value: ['1,0', '1,2,3,4'],
						selected: true
					},
					{
						name: '待处理',
						value: '0',
						selected: false
					},
					{
						name: '已处理',
						value: '1',
						selected: false
					},
					{
						name: '电流',
						value: '1',
						selected: false
					},
					{
						name: '电压',
						value: '2',
						selected: false
					},
					{
						name: '温度',
						value: '3',
						selected: false
					},
					{
						name: '湿度',
						value: '4',
						selected: false
					}
				],
				rows: [],
				selectedDevices: [],
				currentDateIndex: 0,
				range: ["", ""],
				showDeviceList: false,
				popTopValue: 0,
				devlist: [],
				params: {
					alarmDateE: null,
					alarmDateS: null,
					alarmType: [],
					devId: [],
					disposeState: [],
					itemId: '',
					pageNum: 1,
					pageSize: 10,
				}
			}
		},
		computed: {
			popStyle() {
				let value = this.popTopValue;
				return `top: ${value}px;`;
			}
		},
		onLoad() {
			let self = this;
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this)
				query.select('.section-title').boundingClientRect((rect) => {
						self.popTopValue = rect.top + rect.height + 4;
					})
					.exec()
			});

			self.params.itemId = self.$Route.query.id || ''
			this.params.alarmDateS = moment().startOf('day').valueOf()
			this.params.alarmDateE = moment().endOf('day').valueOf()
			let all = this.categoryList[0]
			
			{
				let list = all.value[0].split(',')
				this.params.disposeState = list.map(item=>{
					return parseInt(item)
				})
			}
			
			{
				let list = all.value[1].split(',')
				this.params.alarmType = list.map(item=>{
					return parseInt(item)
				})
			}
		},
		methods: {
			selectCategory(e) {
				let index = e.currentTarget.dataset.index;
				if (index == 0) {
					this.categoryList.forEach((item, idx) => {
						if (idx == 0) {
							item.selected = !item.selected
						} else {
							item.selected = false
						}
					})
				} else {
					this.categoryList[0].selected = false
					this.categoryList[index].selected = !this.categoryList[index].selected
				}

				let all = this.categoryList[0]
				if (all.selected) {
					this.params.disposeState = all.value[0].split(',')
					this.params.alarmType = all.value[1].split(',')
				} else {
					var disposeState = []
					if (this.categoryList[1].selected) {
						disposeState.push(this.categoryList[1])
					}
					if (this.categoryList[2].selected) {
						disposeState.push(this.categoryList[2])
					}
					this.params.disposeState = disposeState.map(item => {
						return item.value;
					})

					this.params.alarmType = this.categoryList.slice(-4).filter(item => {
						return item.selected ? true : false
					}).map(item => {
						return item.value
					})
				}
				
				this.loadData()
			},
			selectDate(e) {
				if (e.currentTarget.dataset.index != this.currentDateIndex) {
					this.currentDateIndex = e.currentTarget.dataset.index;

					if (this.currentDateIndex == 0) {
						this.range = []
						this.params.alarmDateS = moment().startOf('day').valueOf()
						this.params.alarmDateE = moment().endOf('day').valueOf()
						this.loadData()
					} else if (this.currentDateIndex == 1) {
						this.range = []
						this.params.alarmDateS = moment().startOf('isoWeek').valueOf()
						this.params.alarmDateE = moment().endOf('isoWeek').valueOf()
						this.loadData()
					} else if (this.currentDateIndex == 2) {
						this.range = []
						this.params.alarmDateS = moment().startOf('month').valueOf()
						this.params.alarmDateE = moment().endOf('month').valueOf()
						this.loadData()
					}
				}
			},
			sureDate(e) {
				this.params.alarmDateS = moment(e[0]).startOf('day').valueOf()
				this.params.alarmDateE = moment(e[1]).endOf('day').valueOf()
				this.range = e
				this.loadData()
			},
			selectDevice(e) {
				if(this.showDeviceList) {
					this.showDeviceList = false;
					return;
				}
				
				let self = this;
				if(this.devlist.length == 0) {
					self.$progressHud.showLoading();
					self.$NetApi.getMethod('/loyu-api/app/dev/item-dev-list', {
						itemId:this.params.itemId || 0
					}).then(ok => {
						self.$progressHud.hideLoading();
						let list = ok.data.map(item=>({
							...item,
							selected:false
						}))
						self.devlist = list
						self.showDeviceList = true
					}, fail => {
						self.$progressHud.hideLoading();
						self.$progressHud.showToast(fail.errMsg || '网络错误');
					})
				} else {
					this.showDeviceList = true
				}

			},
			closeDevicePopup() {
				this.showDeviceList = false;
			},
			poplist_selectDevice(e) {
				let index = e.currentTarget.dataset.index;
				this.devlist[index].selected = !this.devlist[index].selected;
			},
			reset() {
				this.devlist.forEach(item => {
					item.selected = false
				})
				this.selectedDevices = []
				this.params.devId = []
			},
			confirmSelect() {
				this.closeDevicePopup()

				this.selectedDevices = this.devlist.filter(item => {
					return item.selected ? true : false
				})

				this.params.devId = this.selectedDevices.map(item => {
					return item.devId
				})
				
				this.loadData()
			},
			confirmDo(item) {
				let self = this;
				this.$progressHud.showModal({
					title: '',
					text: '确定要处理吗?',
					comfirmColor: "#1677FF",
					cancelColor: "#4B5563",
					success: (res) => {
						if (res.confirm) {
							self.$progressHud.showLoading();
							self.$NetApi.postMethod('/loyu-api/app/alarm/info/dispose', {
								alarmId:item.alarmId
							}).then(ok => {
								self.$progressHud.hideLoading();
								self.$progressHud.showToast('处理成功')
								setTimeout(()=>{
									self.loadData()
								}, 1500);
							}, fail => {
								self.$progressHud.hideLoading();
								self.$progressHud.showToast(fail.errMsg || '网络错误');
							})
						}
					},
				})
			},
			seeDetail(e) {
				let row = e.currentTarget.dataset.row;
				this.$Router.push({
					path: '/modules/projects/pages/componentDetail/componentDetail',
					query: {
						id: row.componentGoodsId
					}
				})
			},
			
			loadData() {
				this.$refs.paging.reload()
			},
			queryList(pageNo, pageSize) {
				this.params.pageNum = pageNo;
				this.params.pageSize = pageSize
				
				let self = this;
				self.$progressHud.showLoading();
				self.$NetApi.postMethod('/loyu-api/app/alarm/info/detail/list', this.params).then(ok => {
					self.$progressHud.hideLoading();
					self.$refs.paging.complete(ok.rows);
				}, fail => {
					self.$refs.paging.complete(false);
					self.$progressHud.hideLoading();
					self.$progressHud.showToast(fail.errMsg || '网络错误');
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $power-bkg-color;
	}

	.page-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		position: relative;
		overflow: hidden;
	}

	.filter-section {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		column-gap: 9px;
		margin: 16px;
		flex-shrink: 0;
	}

	.filter-item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		line-height: 42rpx;
		padding: 12rpx 24rpx;
		background-color: #fff;
		border-radius: 8rpx;
		color: #4B5563;
	}

	.filter-item-active {
		background-color: $power-color-primary;
		color: #FFFFFF;
	}

	.type-tags {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 9px;
		row-gap: 32rpx;
		width: 100%;
		box-sizing: border-box;
		flex-shrink: 0;
		margin-left: 16px;
		margin-right: 16px;
	}

	.type-tag {
		flex: 0 0 calc(25% - 6.75px - 8px);
		text-align: center;
		font-size: 28rpx;
		line-height: 42rpx;
		padding: 12rpx 24rpx;
		border-radius: 8rpx;
		background-color: #fff;
		color: #4B5563;
	}

	.type-tag-active {
		background-color: $power-color-primary;
		color: #FFFFFF;
	}

	.section-title {
		display: flex;
		justify-content: space-between;
		padding: 16rpx 32rpx;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		margin-left: 16px;
		margin-right: 16px;

		border-radius: 8rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1px solid #E5E7EB;

		font-size: 28rpx;
		font-weight: normal;
		line-height: 42rpx;
		letter-spacing: normal;
		color: #9CA3AF;

		flex-shrink: 0;
	}


	.alarm-list {
		//margin-left: 16px;
		//margin-right: 16px;
		//width: calc(100% - 32px);
		width: 100%;
		flex: 1;
		overflow: hidden;
	}

	.alarm-item {
		background-color: #fff;
		padding: 32rpx;
		border-radius: 24rpx;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
		box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05);
		margin-bottom: 24rpx;
		margin-left: 16px;
		margin-right: 16px;
		width: calc(100% - 32px);
	}

	.alarm-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.alarm-header_content {
		display: flex;
		flex-direction: row;
		align-items: center;
		column-gap: 8rpx;
	}

	.alarm-level {
		color: $power-color-error;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 42rpx;
	}

	.alarm-time {
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #9CA3AF;
	}

	.device-name {
		margin-bottom: 16rpx;
		display: block;

		font-size: 32rpx;
		font-weight: normal;
		line-height: 48rpx;
		letter-spacing: normal;
		color: #000000;
	}

	.device-location {
		margin-bottom: 24rpx;
		display: block;

		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}

	.alarm-info_content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.alarm-info {
		display: flex;
		flex-direction: column;
	}

	.alarm-type {
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}

	.alarm-value {
		font-size: 32rpx;
		font-weight: normal;
		line-height: 48rpx;
		letter-spacing: normal;
		color: #000000;
	}

	.alarm-status {
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		flex-shrink: 0;
	}

	.todo {
		background-color: #FFF7ED;
		color: #EA580C;
	}

	.done {
		background-color: #F9FAFB;
		color: #4B5563;
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
		column-gap: 24rpx;
	}

	.action-btn {
		flex: 1;
		font-size: 28rpx;
		height: 78rpx;
		line-height: 78rpx;
	}

	.confirm {
		background-color: $power-color-primary;
		color: white;
	}

	.detail {
		background: rgba(0, 0, 0, 0);
		color: #4B5563;
		border-radius: 8rpx
	}

	/* 设备选择弹出层 - 精准定位 */
	.popup-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
		overflow: hidden;
	}

	.popup-overlay.show {
		opacity: 1;
		pointer-events: auto;
	}

	.device-selector-popup {
		background-color: transparent;
		border-radius: var(--rounded-xl) var(--rounded-xl) 0 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		box-shadow: var(--shadow-lg);
		height: calc(100% - 40px);
		overflow: hidden;
		display: flex;
		flex-direction: column;

	}

	.scroll-content {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: #f6f6f6;
	}

	.scroll-my {
		height: calc(100% - 142rpx);
	}

	.search_item {
		background: #f6f6f6;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		padding-left: 16px;
		padding-right: 16px;
		padding-top: 28rpx;
		padding-bottom: 28rpx;
		border-top: 1px solid #cbcbcb;

		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
	}

	.search_left {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		column-gap: 24rpx;
	}

	.search_left_selected {
		color: $power-color-primary;
	}

	.search_left_normal {
		color: #6B7280;
	}

	.bottom-view_2 {
		height: 142rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		column-gap: 32rpx;
		background-color: #FFF;
		border-top: 0.5px solid #cbcbcb;
	}

	.bottom_btn {
		border-radius: 8rpx;
		background: $power-color-primary;
		width: 40%;
		text-align: center;
		color: #FFF;


		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		height: 78rpx;
		line-height: 78rpx;
		letter-spacing: normal;
	}

	.bottom_btn_2 {
		border-radius: 8rpx;
		background: #FFF;
		width: 40%;
		text-align: center;
		color: $power-color-primary;
		border: 2rpx solid $power-color-primary;

		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		height: 78rpx;
		line-height: 78rpx;
		letter-spacing: normal;
	}

	.nodata {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: transparent;
		padding-bottom: 25%;
	}

	.nodata .img {
		width: 50vw;
		height: 41vw;
		margin-bottom: 10rpx;
		background: url(/static/mine/no_data.png) no-repeat center center;
		background-size: 100% auto;
	}

	.nodata .text {
		font-size: 30rpx;
		color: #999;
	}

	.example-body {
		margin-left: 16px;
		margin-right: 16px;
		margin-bottom: 32rpx;
	}

	.example-body ::v-deep .icon-calendar {
		color: #4B5563 !important;
	}

	.example-body ::v-deep .uni-date__x-input {
		font-size: 28rpx !important;
		color: #4B5563 !important;
		//color: #9CA3AF !important;
	}

	.example-body ::v-deep .range-separator {
		//color: #4B5563 !important;
		color: #9CA3AF !important;
	}

	.example-body ::v-deep .uni-date-x--border {
		border-color: #E5E7EB !important;
	}
</style>